<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Counter</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <input type="text" id="input1" class="form-control text-center" value="0" readonly>
            </div>
            <div class="col-md-6">
                <input type="text" id="input2" class="form-control text-center" value="0" readonly>
            </div>
        </div>
    </div>
    <!-- 引入 Bootstrap JS 和 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // JavaScript 代码开始
        // 初始化变量，用于存储第一个输入框的值
        let value1 = 0;
        // 初始化变量，用于存储第二个输入框的值
        let value2 = 0;
        // 定义一个函数，用于更新第一个输入框的值
        function updateInput1() {
            value1++;
            document.getElementById('input1').value = value1;
        }
        // 定义一个函数，用于更新第二个输入框的值
        function updateInput2() {
            value2 += 2;
            document.getElementById('input2').value = value2;
        }
        // 使用 setInterval 函数，每 1000 毫秒（1 秒）调用一次 updateInput1 函数
        setInterval(updateInput1, 1000);
        // 使用 setInterval 函数，每 1000 毫秒（1 秒）调用一次 updateInput2 函数
        setInterval(updateInput2, 1000);
        // JavaScript 代码结束
    </script>
</body>
</html>